<script>
import {defineComponent} from 'vue'
import PullRefreshList from "@/components/PullRefreshList.vue";
import userApi from "@/utils/api/userApi";
import ActItem from "@/views/act/components/ActItem.vue";
import actPage from "@/utils/pages/actPage";

export default defineComponent({
  name: "UserAct",
  components: {ActItem, PullRefreshList},
  setup(){
    return {
      listUserAct: userApi.listAct
    }
  },
  data() {
    return {
      params: ['publish', '', false],
      typeValue: 'publish',
      typeOptions: [
        {text: '创建的活动', value: 'publish'},
        {text: '参加的活动', value: 'apply'},
      ],
      sortValue: '',
      sortOptions: [
        {text: '默认排序', value: ''},
        {text: '开始时间顺序', value: 'start_asc'},
        {text: '开始时间逆序', value: 'start_desc'},
        {text: '结束时间顺序', value: 'end_asc'},
        {text: '结束时间逆序', value: 'end_desc'},
      ]
    }
  },
  methods: {
    typeChange(value){
      this.params[0] = value
      this.$refs.userActList.onRefresh()
    },
    sortChange(value){
      switch (value){
        case '':{
          this.params[1] = ''
          break
        }
        case 'start_asc':{
          this.params[1] = 'start'
          this.params[2] = false
          break
        }
        case 'start_desc':{
          this.params[1] = 'start'
          this.params[2] = true
          break
        }
        case 'end_asc':{
          this.params[1] = 'end'
          this.params[2] = false
          break
        }
        case 'end_desc':{
          this.params[1] = 'end'
          this.params[2] = true
          break
        }
      }
      this.$refs.userActList.onRefresh()
    },
    gotoActInfo(actId){
      actPage.info(actId).open().blank()
    },
  }
})
</script>

<template>
  <van-sticky>
    <van-dropdown-menu>
      <van-dropdown-item v-model="typeValue" :options="typeOptions" @change="typeChange"/>
      <van-dropdown-item v-model="sortValue" :options="sortOptions" @change="sortChange"/>
    </van-dropdown-menu>
  </van-sticky>
  <PullRefreshList :load-func="listUserAct" :params="params" ref="userActList">
    <template v-slot:list="{list}">
      <div v-for="(item, index) in list">
        <ActItem
          :act="item.act"
          :user="item.user"
          :apply="item.apply"
          @actClick="gotoActInfo"
          />
        <div class="separator-line"/>
      </div>
    </template>
  </PullRefreshList>
</template>

<style scoped lang="less">
@import "@/assets/style/less/all.less";
</style>